import {
    getArrow,
    getCarLocationPath,
    getCarPath, getChargingLightningPath, getChargingPath,
    getFourPath, getLocationInsideEdge,
    getLocationOutSideEdge,
    getThreeBesselPath,
    getTwoBesselPath,
    getMapFrame,
    getMapLane,
    getMapDoor,
    getLocationPath,
    getMapZones,
    getMapLaneSplitLine,
    mapIndicatoricon,
    getContainerPath,
    getContainerNodePath
} from "@/draw/util/drawPathUtil";
import {getQuadratic} from "./drawPathUtil";

/**
 * 绘制线
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawLine(cfg, group){
    console.log(123);
    cfg.width = cfg.size ? parseInt(cfg.size[0]) : null;
    cfg.height = cfg.size ? parseInt(cfg.size[1]) : null;
    cfg.color =  cfg.color ? cfg.color : '#000';
    cfg.lineWidth = cfg.lineWidth ? cfg.lineWidth : 2;
    cfg.origin = {x: cfg.x1 ? cfg.x1 : -cfg.width/2, y: cfg.y1 ? cfg.y1 : 0};
    cfg.target = {x: cfg.x2 ? cfg.x2 : cfg.width/2, y: cfg.y2 ? cfg.y2 : 0};
    return  group.addShape('line', {
        attrs: {
            x1: cfg.origin.x,
            y1: cfg.origin.y,
            x2: cfg.target.x,
            y2: cfg.target.y,
            stroke: cfg.color,
            lineWidth: cfg.lineWidth,
            endArrow: cfg.isArrow ? getArrow(cfg.color) : {path: []},
            lineDash: cfg.isDash ? [10, 5] : [0,0]
        },
        name: 'line',
        draggable: true,
    });
}

/**
 * 绘制文本
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawText(cfg, group){
    const height = cfg.size[1];
    cfg.text = cfg.text ? cfg.text : '文本';
    cfg.position = cfg.position ? cfg.position : 'center';
    cfg.color = cfg.color ? cfg.color : '#000';
    cfg.fontSize = cfg.fontSize ? cfg.fontSize : 13;
    cfg.fontWeight = cfg.fontWeight ? cfg.fontWeight : 600;
    const textGroup = group.addGroup();
    const textShape = group.addShape('text', {
        group: textGroup,
        attrs: {
            text: cfg.text,
            fill: cfg.color,
            textAlign: cfg.position,
            fontSize: cfg.fontSize,
            fontWeight: cfg.fontWeight,
            textBaseline: 'middle', //'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
        },
        name: 'text-shape',
        draggable: true,
    })
    const bbox = textShape.getBBox();
    cfg.size = [bbox.width, height]
    group.addShape('rect', {
        group: textGroup,
        attrs: {
            width: bbox.width,
            height: height,
            fill: '#000',
            fillOpacity: 0.01,
            x: bbox.x,
            y: -height/2,
        },
        name: 'text-rect-shape',
        draggable: true,
     })
    return  textGroup;
}

/**
 * 绘制二次贝尔曲线
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawTwoBessel(cfg, group){
    cfg.color = cfg.color ? cfg.color :'#000';
    cfg.lineWidth = cfg.lineWidth ? cfg.lineWidth : 2;
    cfg.origin = cfg.origin ? cfg.origin : {x: -cfg.size[0]/2, y: -cfg.size[1]/2};
    cfg.control = cfg.control ? cfg.control : {x: cfg.size[0]/2, y: -cfg.size[1]/2}
    cfg.target = cfg.target ? cfg.target : {x: cfg.size[0]/2, y: cfg.size[1]/2};
    return group.addShape('path', {
        attrs: {
            path: getTwoBesselPath(cfg.origin, cfg.control, cfg.target),
            stroke: cfg.color,
            lineWidth: cfg.lineWidth,
            endArrow: cfg.isArrow ? getArrow(cfg.color) : {path: []},
            lineDash: cfg.isDash ? [10, 5] : [0,0]
        },
        name: 'two-bessel-shape',
        draggable: true,
    })
}

/**
 * 绘制三次贝尔曲线
 * @param cfg
 * @param group
 */
export function drawThreeBessel(cfg, group){
    cfg.color = cfg.color ? cfg.color :'#000';
    cfg.lineWidth = cfg.lineWidth ? cfg.lineWidth : 2;
    cfg.origin = cfg.origin ? cfg.origin : {x: -cfg.size[0]/2, y: -cfg.size[1]/2};
    cfg.control1 = cfg.control1 ? cfg.control1 : {x: -cfg.size[0]/4, y: cfg.size[1]}
    cfg.control2 = cfg.control2 ? cfg.control2 : {x: cfg.size[0]/4, y: -cfg.size[1]}
    cfg.target = cfg.target ? cfg.target : {x: cfg.size[0]/2, y: cfg.size[1]/2};
    return group.addShape('path', {
        attrs: {
            path: getThreeBesselPath(cfg.origin, cfg.control1, cfg.control2, cfg.target),
            stroke: cfg.color,
            lineWidth: cfg.lineWidth,
            endArrow: cfg.isArrow ? getArrow(cfg.color) : {path: []},
            lineDash: cfg.isDash ? [10, 5] : [0,0]
        },
        name: 'three-bessel-shape',
        draggable: true,
    })
}

/**
 * 绘制四个角
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawFour(cfg, group){
    const width = parseInt(cfg.size[0]);
    const height = parseInt(cfg.size[1]);
    cfg.lineWidth = cfg.lineWidth ? cfg.lineWidth : 2;
    cfg.color = cfg.color ? cfg.color : '#000';
    return group.addShape('path', {
        attrs: {
            width: width/2,
            height: height/2,
            path: getFourPath(width, height),
            lineWidth: cfg.lineWidth,
            stroke: cfg.color,
        },
        name: 'four-shape',
        draggable: true,
    });
}

/**
 * 绘制矩形
 * @param cfg
 * @param group
 */
export function drawRect(cfg, group){
    const width = cfg.size[0];
    const height = cfg.size[1];
    cfg.lineWidth = cfg.lineWidth ? cfg.lineWidth: 2;
    cfg.color = cfg.color ? cfg.color : '#000';
    cfg.fillColor = cfg.fillColor ? cfg.fillColor : '#000';
    cfg.fillOpacity = cfg.fillOpacity ? cfg.fillOpacity : 0.01;
    cfg.radius = cfg.radius ? cfg.radius : 5;
    cfg.isDash = cfg.isDash ? [10, 5] : null
    return group.addShape('rect',{
        attrs: {
            width: width,
            height: height,
            x: -width/2,
            y: -height/2,
            lineWidth: cfg.lineWidth,
            stroke: cfg.color,
            radius: [cfg.radius, cfg.radius],
            fill: cfg.fillColor,
            fillOpacity: cfg.fillOpacity,
            lineDash: cfg.isDash
        },
        name: 'rect-shape',
        draggable: true,
    })
}

/**
 * 绘制小车
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawCar(cfg, group){
    const width = cfg.size[0];
    const height = cfg.size[1];
    cfg.color = cfg.color ? cfg.color : '#000';
    const keyShape =  group.addShape( 'path', {
        attrs: {
            path: getCarPath(width, height).join(" "),
            width: width/2,
            fill: cfg.color,
            lineWidth: 1,
            height: height/2,
            zIndex: 9999,
        },
        draggable: true,
        name: 'car-shape'
    });
    return keyShape;
}

/**
 * 绘制库位
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawLocation(cfg, group){
    const width = cfg.size[0];
    const height = cfg.size[1];
    cfg.color = cfg.color ? cfg.color : '#6FEE79';
    group.addShape('path', {
        attrs: {
            path: getLocationPath(width, height),
            stroke: cfg.color,
            fill: cfg.backColor ? cfg.backColor : '#fff',
            lineWidth: 0.5,
        },
        draggable: true,
        name: 'outside-edge'
    });

    group.addShape('text', {
        attrs: {
            text: width > height ? cfg.label : rotateText(cfg.label),
            fill: cfg.textColor ? cfg.textColor : '#000',
            textAlign: 'center',
            fontSize: width > height ? width*0.11 : height * 0.11,
            width: width,
            height: height,
            x: 0,
            y: 0,
            fontWeight: 600,
            textBaseline: 'middle', //'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
        },
        name: 'outside-text'
    });  
    return group;
}

/**
 * 旋转文本
 * @param {} text 
 * @returns 
 */
function rotateText(text){
    const texts = text?.split('-');
    return texts.map((item, index) => {
        return index !== texts.length - 1 ? item + "\n" + "|" + "\n"  : item;
    }).join("");
}
/**
 * 绘制停车位
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawCarLocation(cfg, group){
    const width = cfg.size[0];
    const height = cfg.size[1];
    cfg.color = cfg.color ? cfg.color : '#000';
    group.addShape('circle',{
        attrs: {
            width: width,
            height: height,
            x: 0,
            y: 0,
            r: width/2,
            fill: cfg.color,
        },
        name: 'outside-circle',
        draggable: true,
    })

    group.addShape('circle',{
        attrs: {
            width: width/2.8,
            height: height/2.8,
            x: 0,
            y: 0,
            r: width/2.8,
            stroke: "#FFF",
            lineWidth: width/30,
            fill: cfg.color,
        },
        zIndex: 1,
        name: 'inside-circle',
        draggable: true,
    });

    group.addShape('path', {
        attrs: {
            path: getCarLocationPath(width, height),
            stroke: '#FFF',
            lineWidth: width/25
        },
        name: 'icon',
        draggable: true,
    });
    return group;
}

/**
 * 绘制充电桩
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawCharging(cfg, group){
    const width = cfg.size[0];
    const height = cfg.size[1];
    cfg.color = cfg.color ? cfg.color : '#000';
    group.addShape('path', {
        attrs: {
            path: getChargingPath(width, height),
            fill: cfg.color,
            lineWidth: 1,
            width: width/2,
            height: height/2
        },
        name: 'charging-shape',
        draggable: true,
    })

    group.addShape('rect', {
       attrs: {
           width: width/2.5,
           height: height/3.2,
           x: -width/3,
           y: -height/2.53,
           stroke: '#FFF',
           fill: '#FFF',
           radius: [width/18, width/18]
       },
        name: 'charging-rect-shape',
        draggable: true,
    });

    group.addShape('path', {
        attrs: {
            path: getChargingLightningPath(width, height),
            stroke: '#FFF',
            fill: '#FFF',
            lineWidth: 1,
        },
        name: 'charging-lightning-shape',
        draggable: true,
    })
    return group;
}



// 绘制托盘
export function drawContainer(cfg,  group){
    const width = cfg.size[0];
    const height = cfg.size[1];
    cfg.color = cfg.color ? cfg.color : '#6495ED';
    group.addShape('path', {
        attrs: {
            path: getContainerPath(width, height),
            x: 0,
            y: 0,
            // fill: "#000",
            stroke: cfg.color,
        },
        name: 'container-edge',
        draggable: true,
    });

    group.addShape('path', {
        attrs: {
            path: getContainerNodePath(width, height),
            stroke: cfg.color,
            fill: cfg.color
        },
        name: 'container-back'
    });

    group.addShape('text', {
        attrs: {
            text: width > height ? cfg.label : rotateText(cfg.label),
            fill: '#FFF',
            textAlign: 'center',
            fontSize: width > height ? width*0.11 : height * 0.11,
            width: width,
            height: height,
            x: 0,
            y: 0,
            fontWeight: 600,
            textBaseline: 'middle', //'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
        },
        name: 'conainer-text'
    })
    if(cfg.angle){
        group.cfg.children.forEach(item => {
            item.rotate((cfg.angle || 0) * Math.PI / 180);
        })
    }
    return group;
}

/**
 * 画背景图
 * @param cfg
 * @param group
 */
export function drawImage(cfg, group){
    const width = cfg.size[0];
    const height = cfg.size[1];
    const path = []
    for(let i=0; i<419; i++){
        path.push(['M', 0, i/0.08,]);
        path.push(['L', width,i/0.08]);
    }
    for(let i=0; i<321; i++){
        path.push(['M', i/0.08, 0,]);
        path.push(['L', i/0.08, height]);
    }
    // 绘制网格
    group.addShape('path', {
        attrs: {
                path: path,
                stroke: '#efefef',
                lineWidth: 1,
        },
        name: 'map-mesh'
    });

    // 绘制地图轮毂
    group.addShape('path', {
        attrs: {
            path: getMapFrame(),
            stroke: '#000',
            lineWidth: 1,
            x: -width/2,
            y: -height/2,
        }
    });
    // 绘制道路
    group.addShape('path', {
        attrs: {
                path: getMapLane(),
                // stroke: '#5F6072',
                fill: '#EEE9E9',
                lineWidth: 1,
        },
        name: 'map-lane'
    });

    // 绘制门
    group.addShape('path', {
        attrs: {
            path: getMapDoor(),
            stroke: '#00FFFF',
            lineWidth: 1,
        },
        name: 'map-door'
    });
    // 接力区
    group.addShape('text',{
        attrs: {
            text: '接\n力\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 59/0.08,
            y: 168/0.08,
            textBaseline: 'middle',
        },
        name: 'JL-text'
    });
    group.addShape('text',{
        attrs: {
            text: '18\n班',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 97/0.08,
            y: 220/0.08,
            textBaseline: 'middle',
        },
        name: '18-text'
    })
    group.addShape('text',{
        attrs: {
            text: '18\n班',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 97/0.08,
            y: 265/0.08,
            textBaseline: 'middle',
        },
        name: '18-text2'
    });

    group.addShape('text',{
        attrs: {
            text: 'S\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 155/0.08,
            y: 275/0.08,
            textBaseline: 'middle',
        },
        name: 'S-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'Q\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 167/0.08,
            y: 275/0.08,
            textBaseline: 'middle',
        },
        name: 'Q-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'T\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 155/0.08,
            y: 300/0.08,
            textBaseline: 'middle',
        },
        name: 'T-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'R\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 167/0.08,
            y: 300/0.08,
            textBaseline: 'middle',
        },
        name: 'R-text'
    });

    


    group.addShape('text',{
        attrs: {
            text: 'E\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 216/0.08,
            y: 220/0.08,
            textBaseline: 'middle',
        },
        name: 'E-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'H\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 203/0.08,
            y: 220/0.08,
            textBaseline: 'middle',
        },
        name: 'H-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'K\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 192/0.08,
            y: 220/0.08,
            textBaseline: 'middle',
        },
        name: 'K-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'N\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 178.5/0.08,
            y: 220/0.08,
            textBaseline: 'middle',
        },
        name: 'N-text'
    });


    group.addShape('text',{
        attrs: {
            text: 'O\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 178.5/0.08,
            y: 266/0.08,
            textBaseline: 'middle',
        },
        name: 'T-text'
    });
    
    group.addShape('text',{
        attrs: {
            text: 'L\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 192/0.08,
            y: 266/0.08,
            textBaseline: 'middle',
        },
        name: 'L-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'I\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 203/0.08,
            y: 266/0.08,
            textBaseline: 'middle',
        },
        name: 'I-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'F\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 216/0.08,
            y: 266/0.08,
            textBaseline: 'middle',
        },
        name: 'F-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'P\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 178.5/0.08,
            y: 310/0.08,
            textBaseline: 'middle',
        },
        name: 'P-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'M\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 192/0.08,
            y: 310/0.08,
            textBaseline: 'middle',
        },
        name: 'T-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'J\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 203/0.08,
            y: 310/0.08,
            textBaseline: 'middle',
        },
        name: 'J-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'G\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 216/0.08,
            y: 310/0.08,
            textBaseline: 'middle',
        },
        name: 'G-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'D\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 227/0.08,
            y: 310/0.08,
            textBaseline: 'middle',
        },
        name: 'D-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'B\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 240/0.08,
            y: 310/0.08,
            textBaseline: 'middle',
        },
        name: 'B-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'A\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 240/0.08,
            y: 268/0.08,
            textBaseline: 'middle',
        },
        name: 'B-text'
    });

    group.addShape('text',{
        attrs: {
            text: 'C\n区',
            fill: '#9932CC',
            textAlign: 'center',
            fontSize: 20,
            x: 227/0.08,
            y: 266/0.08,
            textBaseline: 'middle',
        },
        name: 'C-text'
    });

    // 分割区
    group.addShape('path', {
        attrs: {
            path: getMapZones(),
            stroke: "#5F9EA0",
            lineWidth: 1,
            lineDash: [10, 5]
        },
        name: 'zone-line',
        draggable: true,
    });
    // 道路分割线
    group.addShape('path', {
        attrs: {
            path: getMapLaneSplitLine(),
            stroke: "#FFA500",
            lineWidth: 1,
            lineDash: [20, 20]
        },
        name: 'split-line'
    });

    group.addShape('path', {
        attrs: {
            path: mapIndicatoricon(),
            // stroke: "#FFA500",
            fill: '#00CED1',
            lineWidth: 1,
        },
        name: 'map-indicator-icon'
    });
    
    return group;
}

/**
 * 绘制点
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawPoint(cfg, group) {
    const size = cfg.size;
    return group.addShape('circle', {
        attrs: {
            width: size ? size[0] : 2,
            height: size? size[1] : 2,
            x: 0,
            y: 0,
            r: size ? size[0] : 2,
            fill: "#000",
        },
        zIndex: 50,
        name: 'point-circle',
        draggable: true,
    })
}

/**
 * 绘制路线
 * @param cfg
 * @param group
 * @returns {*}
 */
export function drawQuadratic(cfg, group) {
    cfg.startPoint = group.getParent().findById(cfg.source).cfg.item.getModel();
    cfg.endPoint = group.getParent().findById(cfg.target).cfg.item.getModel();

    const shope = group.addShape('path', {
        attrs: {
            path: getQuadratic(cfg.startPoint, cfg.endPoint, cfg.controlPoints),
            stroke: cfg.color ? cfg.color : '#EEFFFF',
            lineWidth: 1,
            endArrow: cfg.isArrow ? getArrow(cfg.color) : {path: []},
            lineDash: cfg.isDash ? [10, 5] : [0,0],
        },
        name: 'edge',
        draggable: true,
    });
    return shope;
}
